<template>
  <div>
    <!-- warning -->
    <div class="warning" v-show="isWarning">
      <div class="warning-content">
        <div class="iconfont icon-jiuzhenjilu"></div>
        <div class="warning-txt">{{warningTxt}}</div>
      </div>
    </div>

    <!-- 用户信息 -->
    <div class="user-area">
      <!-- bar -->
      <div class="user-bar">
        <div class="user-title item-required">必填</div>
        <div class="user-title item-norequired">非必填</div>
      </div>

      <!-- 修改 -->
      <!-- item 昵称 -->
      <div class="user-item">
        <!-- 输入框 -->
        <div class="item-row">
          <div class="row-title item-norequired">昵称</div>
          <div class="row-value">
            <input
              name="nickName"
              data-id="nickName"
              class="row-input"
              disabled
              :value="userInfo.nickName"
              type="text"
              :maxlength="11"
              placeholder="微信昵称"
              />
          </div>
        </div>

      </div>

      <!-- item 头像 -->
      <div class="user-item">
        <!-- 用户头像 -->
        <div class="item-row">
          <div class="row-title item-norequired">头像</div>
          <div class="row-value">
            <image
              class="row-img"
              :src="userInfo.avatarUrl"
              mode="aspectFit"
              lazy-load="false">
            </image>
          </div>
        </div>
      </div>


      <!-- item 姓名 -->
      <div class="user-item">
        <!-- 输入框 -->
        <div class="item-row">
          <div class="row-title item-required">姓名</div>
          <div class="row-value">
            <input
              name="realName"
              data-id="realName"
              class="row-input"
              v-model="userInfo.realName"
              type="text"
              :maxlength="8"
              placeholder="姓名"
              @blur="blurUserInfo"/>
          </div>
        </div>

      </div>


      <!-- item 手机号 -->
      <div class="user-item">
        <!-- 输入框 -->
        <div class="item-row">
          <div class="row-title item-required">手机号</div>
          <div class="row-value">
            <input
              name="contact"
              data-id="contact"
              class="row-input"
              v-model="userInfo.contact"
              type="number"
              :maxlength="11"
              placeholder="11位手机号"
              @blur="blurUserInfo"/>
          </div>
        </div>

      </div>


      <!-- item 出生日期 -->
      <div class="user-item">
        <!-- 选择器 -->
        <div class="item-row">
          <div class="row-title item-required">出生日期</div>
          <div class="row-value">
            <picker mode="date"
              name="birth"
              data-id="birth"
              @change="changeUserBirth"   
              v-model="userInfo.birth"
              :start="startDate"
              :end="endDate">
              <view class="picker">{{userInfo.birth}}</view>
            </picker>
          </div>
        </div>
      </div>

      <!-- item 身高 -->
      <div class="user-item">
        <!-- 输入框 -->
        <div class="item-row">
          <div class="row-title item-required">身高</div>
          <div class="row-value item-input-cm">
            <input
              name="height"
              data-id="height"
              class="row-input"
              v-model="userInfo.height"
              type="number"
              :maxlength="3"
              placeholder="身高"
              @blur="blurUserInfo"/>
          </div>
        </div>
      </div>

      <!-- item 体重 -->
      <div class="user-item">
        <!-- 输入框 -->
        <div class="item-row">
          <div class="row-title item-required">体重</div>
          <div class="row-value item-input-weight">
            <input
              name="weight"
              data-id="weight"
              class="row-input"
              v-model="userInfo.weight"
              type="number"
              :maxlength="3"
              placeholder="体重"
              @blur="blurUserInfo"/>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
import WxValidate from '@/utils/WxValidate'
export default {
  components: {
    
  },
  data() {
    return {
      // 用户信息
      userInfo: {
        nickName: 'azhon',
        avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJu3NQ3x4hwbWbxmekBIfenzZDuUw2Wt08iaQQpefnEFekbD2sUDMNJApoHJZUibFjkFL8Xnvjibqzicw/132',
        realName: '钟依依',
        contact: '18812345678',
        gender: 1,
        birth: '2018-04-01',
        height: '170',
        weight: '60'
      },
      // 校验规则
      rules: {
        realName: {
          required: true,
          rangelength: [2, 8]
        },
        contact: {
          required: true,
          tel: true,
        },
        height: {
          required: true,
          range: [0, 300]
        },
        weight: {
          required: true,
          range: [0, 500]
        }
      },
      // 验证字段的提示信息，若不传则调用默认的信息
      messages: {
        realName: {
          required: '请输入姓名',
          rangelength: '请输入2~8个字姓名'
        },
        contact: {
          required: '请输入11位手机号码',
          tel: '请输入正确的11位手机号码',
        },
        height: {
          required: '请输入身高',
          range: '请输入正确的身高'
        },
        weight: {
          required: '请输入体重',
          range: '请输入正确的体重'
        }
      },
      // 显示警告
      isWarning: false,
      // 警告信息
      warningTxt: '填写有误',
      // 定时器id
      timeId: null,


      // 限定选择器可选时间
      startDate: '1900-01-01',
      endDate: '2019-04-15', // 当前
    };
  },
  methods: {

    // 用户信息失去焦点，添加校验
    blurUserInfo (e) {
      let val = e.target.value
      let key = e.target.dataset.id
      // 将key与val传入校验函数中
      let isFail = this.checkData(key, val)
      // 校验不通过
      if (isFail) {
        // 显示警告
        this.showWarning(isFail[0].msg)
        return
      }
      this.userInfo[key] = val
    },
    // 用户生日
    changeUserBirth (e) {
      let val = e.target.value
      let key = e.target.dataset.id
      this.userInfo[key] = val
    },

    // 单个校验
    checkData (key, val) {
      let obj = {}, rule = {}, message = {};
      obj[key] = val;
      rule[key] = this.rules[key];
      message[key] = this.messages[key];
      let Validate = new WxValidate(rule, message);
      // 不通过
      if (!Validate.checkForm(obj)) {
        let err = Validate.errorList
        return err;
      }
      return
    },

    // 提示信息
    showWarning (msg) {
      clearInterval(this.timeId)
      this.warningTxt = msg;
      this.isWarning = true
      this.timeId = setInterval(() => {
        this.isWarning = false
      }, 3000)
    },
  }
};
</script>

<style lang="scss" scoped>
// 用户信息
.user-area {
  // bar
  .user-bar {
    display: flex;
    font-size: 28rpx;
    .user-title {
      padding: 10rpx 20rpx 20rpx;
    }
  }
  .user-item {
    background-color: #fff;
    padding: 0 20rpx;
    // font-size: 28rpx;
    .item-row {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f4f4f4;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .row-title {
        flex: 1;
      }
      .row-value {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .row-phone {
          text-align: right;
          button {
            color: #31b9fb;
            background-color: #fff;

          }
        }
        picker {
          width: 100%;
          .picker {
            width: 100%;
            text-align: right;
            &::after {
              content: " >";
              color: #31b9fb;
            }
          }
        }
        .row-img {
          width: 60rpx;
          height: 60rpx;
        }
      }
      .row-input {
        text-align: right;
      }
    }
  }
}
// 警告框
.warning {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  font-size: 28rpx;
  color: #fff;
  // background-color: orange;
  background: linear-gradient(45deg, #ffd492, #ffa600);
  .warning-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rpx;
  }
}
</style>